<template>
  <div class="detailClass">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" alt="" style="width: 100%; display: block" />
      </van-swipe-item>
    </van-swipe>
    <Tips />
    <div class="info">
      <div class="title">{{ info.name }}</div>
      <div class="goods_brief">{{ info.goods_brief }}</div>
      <div class="retail_price">{{ info.retail_price | RMBformat }}</div>
    </div>
    <van-cell title="展示弹出层" is-link />

    <div class="attribute">
      <h3>商品参数</h3>
      <ul>
        <li v-for="(item,index) in attribute" :key="index">
          <div class="l">{{item.name}}</div>
          <div class="r">{{item.value}}</div>
        </li>
      </ul>

    </div>
  </div>
</template>
<script>
import { GetGoodsDetailData } from "@/request/api";
import Tips from "@/components/Tips";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    Tips,
  },
  props: {},
  data() {
    return {
      // 轮播图数据
      gallery: [],
      // 商品信息
      info: {},
      attribute:[],
    };
  },
  //   方法集合
  methods: {},
  created() {
    //   发送请求,请求这个商品的详情数据
    GetGoodsDetailData({ id: this.$route.query.id }).then((res) => {
      console.log(res);
      this.gallery = res.data.gallery;
      this.info = res.data.info;
      this.attribute=res.data.attribute;
    });
  },
};
</script>
<style lang='less' scoped>
.detailClass {
  // transform: translateX(-0.05rem);
  margin: 0;
  padding: 0;
}
.info {
  background-color: #fff;
  text-align: center;
  line-height: 0.4rem; //等于 40px
  padding: 0.1rem 0;
  border-bottom: 1px solid #ccc;
  .title {
    font-size: 0.2rem;
  }
  .goods_brief {
    font-size: 0.13.5rem;
  }
  .retail_price {
    font-size: 0.13.5rem;
    color: darkred;
  }
}

.attribute{
  background-color: #fff;
  margin-top: .2rem;
  // padding: .1rem 2%;
  padding: .1rem .168rem;
  h3{
    font-size: 0.1638rem;
    line-height: .5rem;
  }
  li{
    // height: .40rem;
    // .3rem 和 .30rem 一样
    line-height: .30rem;
    margin-bottom: .1rem;
    background-color: #efefef;
    display: flex;
    border-radius: .05rem;
    .l{
      flex:3;
      text-align: right;
      margin-right: .1rem;
      font-size: .12rem;
    }
    .r{
      flex:7;
       font-size: 0.168rem;
    }
  }
}


</style>